<template>
	<view>
		<category-nav-bar class="line fixed-top" />

		<view class="category_main">
			<scroll-view :show-scrollbar="false" class="category" scroll-y="true">
				<category-left-bar v-for="(tag, index) in tags" :key="index" :tag="tag" @doneCategory="doneCategory"
					:index="index" :isEnd="isEnd(index)" :ref="'category' + index" @loadCategory="loadCategory" />
			</scroll-view>

			<scroll-view :show-scrollbar="false" ref="goods" class="goodCategory" scroll-y="true">
				<view v-if="categoryViews" class="good" ref="smallCate">
					<category-right-bar v-for="(view, index) in categoryViews[chooseCategory]" :key="index" :view="view"
						@doneView="loadDone  = true" />
				</view>
				<tab-control ref="tab1" class="tab" v-show="loadDone" :titles="titles" @tabClick="tabClick"
					:class="ceiling" />
				<view class="gap-box" v-show="over" />

				<good-list v-if="type" :goods="CurrentGoods" class="specific" @loadGood="done" />

			</scroll-view>

		</view>
		<back-top v-show="isBottom" @click.native="backTop" />
	</view>
</template>
<script scoped>
	import CategoryNavBar from "./childCpn/CategoryNavBar";
	import CategoryLeftBar from "./childCpn/CategoryLeftBar";
	import CategoryRightBar from "./childCpn/CategoryRightBar";

	import GoodList from "@/components/content/Goods/GoodList";
	import TabControl from "@/components/content/Tab/TabControl";
	import BackTop from "components/content/BackTop/BackTop";

	import {
		debounce
	} from "@/common/utils";
	import {
		getCategoryGoods,
		getCategoryGoodsDetail,
	} from "@/network/category";

	export default {
		name: "Category",
		data() {
			return {
				Categorys: null,
				tags: [],
				chooseCategory: 0,
				categoryViews: [],
				miniWallkey: null,
				goods: {
					pop: [],
					new: [],
					sell: [],
				},
				isBottom: false,
				type: null,
				done: null,
				loadDone: false, //识图加载完成后再加载tabControl
				titles: ["流行", "新款", "精选"],
				types: ["pop", "new", "sell"],
				ifLowChrome: false,
				offsetTop: null,
				over: false,
				statusBarHeight: 0,
				typesHeight: 0,
			};
		},
		components: {
			CategoryNavBar,
			CategoryLeftBar,
			CategoryRightBar,
			GoodList,
			BackTop,
			TabControl,
		},
		created() {

			//防抖doneView
			this.done = debounce(this.doneView);
			//获取分类详情
			getCategoryGoods().then((res) => {
				console.log('cate', res)
				for (let c of res[1].data.data) {
					this.tags.push(c.title);
					this.categoryViews.push(JSON.parse(c.list));
				}
				this.loadType();
			});
		},
		onPageScroll(e) {
			this.over = e.scrollTop >= this.offsetTop;
			this.isBottom = this.pageHeight < e.scrollTop;
		},
		methods: {
			//初始化设置默认值

			doneCategory() {
				this.$refs["category" + 0][0].choosed = true;
				this.type = "pop";
			},

			//获取被点击的子组件index设置对应的category
			loadCategory(index) {
				this.offsetTop = null;
				this.over = false;
				console.log('loadCategory')
				this.chooseCategory = index;
			},

			//重新计算bs高度
			doneView() {
				this.$nextTick(async () => {
					// #ifdef H5
					this.offsetTop =
						this.$refs['smallCate'].$el.offsetHeight;
					//#endif

					// #ifndef H5
					await new Promise((resolve, reject) => {
						wx.createSelectorQuery().select('.good').boundingClientRect((
							rect) => {
							// #ifdef MP-WEIXIN 
							this.offsetTop = rect.height - this.statusBarHeight / 2 +
								3; // 节点的高度
							// #endif
							// #ifdef APP
							this.offsetTop = rect.height; // 节点的高度
							// #endif
							resolve()
						}).exec()
					})
					//#endif
					this.loadDone = true;
				})
			},

			//tab点击切换商品视图
			tabClick(index) {
				// this.$refs.tab1.currentIndex = this.$refs.tab2.currentIndex = index;
				this.type = this.types[index];
				// // #ifdef MP-WEIXIN,H5
				// this.$refs.goods.scrollTo(-this.offsetTop);
				// // #endif
				uni.pageScrollTo({
					duration: 100,
					scrollTop: this.offsetTop
				});
			},

			//加载type商品信息
			loadType() {
				// // #ifdef MP-WEIXIN,H5
				// this.$refs.goods.scrollTo(0);
				// // #endif

				const popT = getCategoryGoodsDetail(this.chooseCategory + 1, "pop");
				const newT = getCategoryGoodsDetail(this.chooseCategory + 1, "new");
				const sellT = getCategoryGoodsDetail(this.chooseCategory + 1, "sell");
				Promise.all([popT, newT, sellT])
					.then((res) => {
						this.goods["pop"] = res[0][1].data.data;
						this.goods["new"] = res[1][1].data.data;
						this.goods["sell"] = res[2][1].data.data;
						this.$nextTick(async () => {
							//计算吸顶条件高度
							// #ifdef H5 
							this.offsetTop = this.$refs.tab1.$el.offsetTop;
							// #endif
							// #ifdef APP || MP-WEIXIN
							let typesHeight;

							await new Promise((resolve, reject) => {
								wx.createSelectorQuery().select('.good').boundingClientRect((
									rect) => {
									console.log('typesHeight', rect)
									typesHeight = rect.height; // 距顶点的距离
									resolve()
								}).exec()
							})
							this.offsetTop = typesHeight;
							// #endif

							uni.pageScrollTo({
								duration: 100,
								scrollTop: this.offsetTop
							});
						});

					})
					.catch();
			},
			isEnd(index) {
				return this.titles.length - 1 == index;
			},
		},
		computed: {
			//返回所点标题对应商品
			CurrentGoods() {
				return this.goods[this.type];
			},
			ceiling() {
				return (this.offsetTop && this.over) ? "ceiling" : "";
			},
		},
		watch: {
			//当catetory改变时设置对应的样式
			chooseCategory(newV, oldV) {
				this.$refs["category" + oldV][0].choosed = false;
				this.$refs["category" + newV][0].choosed = true;
				this.loadType();
				this.type = "pop";
			},

		},
		mounted() {
			uni.setStorage({
				key: 'pageHeight',
				data: this.pageHeight,
			});
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		}
	};
</script>
<style lang="scss" scoped>
	.category_main {
		width: 100vw;
		display: flex;
		background-color: white;
		flex-direction: row;

		/* #ifdef MP-WEIXIN */
		margin-top: 190rpx;
		/* #endif */

		/* #ifdef H5 */
		margin-top: 90rpx;
		/* #endif */

		/* #ifdef APP*/
		margin-top: calc(90rpx + var(--status-bar-height));
		/* #endif */
	}

	.ceiling {
		position: fixed;
		width: 75vw;
		//设置吸顶灯离顶高度
		/* #ifdef H5 */
		top: calc(92rpx + var(--status-bar-height));
		/* #endif */
		/* #ifdef MP-WEIXIN */
		top: calc(150rpx + var(--status-bar-height));
		/* #endif */

		/* #ifdef APP */
		top: calc(85rpx + var(--status-bar-height));
		/* #endif */

	}

	.gap-box {
		//设置间隔盒子高度
		height: 90rpx;
		width: 100vw;
	}

	.category {
		width: 25vw;
		background-color: rgb(240, 240, 240);
		position: fixed;
		height: 100%;
		overflow-x: hidden;
		overflow-y: hidden;
	}

	.goodCategory {
		margin-left: 25vw;
		overflow-x: hidden;
		overflow-y: hidden;
	}

	.specific {
		width: 100%;
	}

	.good {
		box-sizing: border-box;
		padding: 40rpx 0rpx;
		display: flex;
		width: 100%;
		flex-flow: row wrap;
		/* #ifdef H5 */
		gap: 20rpx;
		/* #endif */

		padding: 20rpx;
	}

	.reload {
		position: fixed;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		z-index: 1;
	}

	.box {
		height: 90rpx;
		width: 100%;

	}

	.line {
		background-color: white;
		border-bottom: 2rpx solid rgb(229, 229, 229);
	}
</style>
